<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="closeDialog"
    class
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <!-- <div class="title-gra plr30">
      <div class="grab gra-r">
        <span class="grab gra-l"></span>
      </div>
    </div> -->
    <div v-loading="loading">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="organ-management"
      >
        <el-col :span="24" v-if="type!=='create' && ruleForm.parentId!='0'">
          <el-form-item label="上级部门：" style="padding-left:10px">
            <el-input style="margin-left:-10px" v-model="ruleForm.supDepartment" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类别：" style="padding-left:10px">
            <el-radio-group style="margin-left:-10px" v-model="ruleForm.orgType" :disabled="disabled">
              <el-radio label="0">单位</el-radio>
              <el-radio label="1">部门</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-col :span="12">
            <el-form-item label="名称：" prop="orgName">
              <el-input v-model="ruleForm.orgName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="ruleForm.orgType==='0'">
            <el-form-item label="组织机构代码：" prop="orgCode">
              <el-input style="margin-left:45px" v-model="ruleForm.orgCode" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序：" prop="orgSort">
            <el-input v-model="ruleForm.orgSort"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注：" style="padding-left:10px">
            <el-input style="margin-left:-10px" type="textarea" :rows="6" v-model="ruleForm.comment"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <div class="mr-btn">
        <el-button class="def-btn-sty" @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { updateSysOrg, addSysOrg } from "@/api/organApi.js";
export default {
  data() {
    var validateOrgSort = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("排序不能为空"));
      } else if (!/^[1-9]\d*$/.test(value)) {
        callback(new Error("允许输入大于0的整数"));
      } else {
        callback();
      }
    };
    var validateOrgName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("名称不能为空"));
      } else if (!/^[a-zA-Z0-9\u4E00-\u9FA5]{0,100}$/.test(value)) {
        callback(new Error("允许输入100位内的中文，英文字母或者数字"));
      } else {
        callback();
      }
    };
    var validateOrgCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("组织机构代码不能为空"));
      } else if (!/^[0-9]{12}$/.test(value)) {
        callback(new Error("请输入12位数字"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      disabled: false,
      title: "",
      loading: false,
      type: "",
      ruleForm: {
        orgId: "",
        supDepartment: "",
        orgType: "0",
        orgName: "",
        orgCode
        : "",
        orgSort: "",
        comment: "",
        parentId: "",
        orgLevel: "" //机构层级
      },
      rules: {
        orgSort: [
          { required: true, message: "排序不能为空", trigger: "blur" },
          { validator: validateOrgSort, trigger: "blur" }
        ],
        orgName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { validator: validateOrgName, trigger: "blur" }
        ],
        orgCode: [
          { required: true, message: "组织机构不能为空", trigger: "blur" },
          { validator: validateOrgCode, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    openDialogVisible(type, val) {
      this.dialogVisible = true;
      this.type = type;
      debugger
      if (type === "add") {
        //新增子机构
        this.title = "新增";
        this.disabled = false;
        this.ruleForm.supDepartment = val.orgName;
        this.ruleForm.parentId = val.orgId;
        this.ruleForm.orgLevel = Number(val.orgLevel) + 1 || "";
      } else if (type === "edit") {
        this.title = "编辑";
        this.disabled = true;
        this.ruleForm.supDepartment = val.superName ? val.superName : val.orgName;
        this.ruleForm.orgType = val.orgType.toString();
        this.ruleForm.orgName = val.orgName;
        this.ruleForm.parentId = val.parentId;
        this.ruleForm.orgId = val.orgId;
        this.ruleForm.orgCode = val.orgCode;
        this.ruleForm.orgSort = val.orgSort;
        this.ruleForm.comment = val.comment;
      } else if (type === "create") {
        this.title = "注册";
        this.disabled = false;
        this.ruleForm.parentId = 0;
        this.ruleForm.orgLevel = 1;
      }
    },
    closeDialog() {
      this.ruleForm = {
        orgId: "",
        supDepartment: "",
        orgType: "0",
        orgName: "",
        orgCode: "",
        orgSort: "",
        comment: "",
        parentId: "",
        orgLevel: ""
      };
      this.$refs["ruleForm"].resetFields();
      this.$refs["ruleForm"].clearValidate();
      this.dialogVisible = false;
    },
    msg(err) {
      this.$alert(err, "提示", {
        confirmButtonText: "确定",
        callback: action => {}
      });
    },
    save() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.type === "edit") {
            this.updateSysOrg();
          } else if (this.type === "add" || this.type === "create") {
            this.addSysOrg();
          }
        }
      });
    },
    //修改组织机构
    updateSysOrg() {
      const data = {
        orgId: Number(this.ruleForm.orgId),
        orgName: this.ruleForm.orgName,
        comment: this.ruleForm.comment,
        orgSort: Number(this.ruleForm.orgSort)
      };
      updateSysOrg(data).then(res => {
        if (res.data.code === "0000") {
          this.loading = false;
          this.$message.success("修改成功");
          this.$emit("callBack");
          this.closeDialog();
        } else {
          this.loading = false;
          this.$message.error("修改失败");
        }
      });
    },
    //新增组织机构
    addSysOrg() {
      const data = {
        parentId: Number(this.ruleForm.parentId),
        orgName: this.ruleForm.orgName,
        orgLevel: Number(this.ruleForm.orgLevel),
        orgType: Number(this.ruleForm.orgType),
        orgSort: Number(this.ruleForm.orgSort),
        comment: this.ruleForm.comment
      };
      if (Number(this.ruleForm.orgType) === 0) {
        data.orgCode = this.ruleForm.orgCode;
      }
      addSysOrg(data).then(res => {
        if (res.data.code === "0000") {
          this.loading = false;
          this.$message.success("新增成功");
          this.$emit("callBack");
          this.closeDialog();
        } else {
          this.loading = false;
          this.$message.error(res.data.message);
        }
      });
    }
  }
};
</script>

<style>
.organ-management .el-input__inner {
  width: 220px;
}
</style>

